<template>
  <view class="uni-flex uni-flex-item uni-column">
    <view class="uni-list" id="tuijian-product">
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in shop_products" :key="key">
        <view class="uni-media-list" v-if="value.stock>0">
          <image class="uni-media-list-logo" :src="value.img" @tap="showDetail(value)"></image>
          <view class="uni-media-list-body">
            <view class="uni-media-list-text-top uni-ellipsis-2" @tap="showDetail(value)">{{value.title}}</view>
            <view class="uni-media-list-text-bottom">
              <view>
                <text class="uni-h6">{{value.seller_count}}</text>
                <text>&nbsp;&nbsp;</text>
                <text class="uni-h6">库存剩{{value.stock}}件</text>
              </view>
              <view>
                <text class="product-price">￥{{value.price/100}}</text>
                <text>&nbsp;&nbsp;</text>
                <text class="product-origin-price">￥{{value.origin_price/100}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="loadMore" v-if="showLoadMore" @tap="getShopProducts()">{{loadMoreText}}</view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'

  var self;
  export default {
    data: {
      shop_id: 682731,
      shop_products: [],
      page: 0,
      loadMoreText: "加载更多...",
      showLoadMore: true,
      has_more: true,
    },
    onLoad: function ({
      shop_id
    }) {
      self = this;
      //解构启动参数获取贝店的id值
      if (shop_id) this.shop_id = shop_id;
      console.log("shop_id:" + this.shop_id);

      this.getShopProducts();
    },
    onUnload: function () {
      this.loadMoreText = "加载更多...";
      this.showLoadMore = false;
      this.has_more = false;
    },
    onReachBottom() {
      console.log("onReachBottom");
      if (this.has_more === false) {
        this.loadMoreText = "没有更多数据了!"

        console.log(this.loadMoreText);
        return;
      }
      this.showLoadMore = true;
      //加载下一页数据
      this.getShopProducts();
    },

    methods: {
      getShopProducts() {
        if (this.has_more) {
          this.page = this.page + 1;
        } else {
          return;
        }
        const api = 'https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list';
        let url = `${api}&page=${this.page}&shop_id=${this.shop_id}`;
        console.log(url)

        uni.request({
          url: url,
          success: (res) => {
            self.has_more = res.data.has_more;
            self.shop_products = self.shop_products.concat(res.data.shop_products)
          },
          fail: (data, code) => {
            console.log('fail' + JSON.stringify(data));
          }
        });
      },
      showDetail(value) {
        //https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731
        let iid = value.iid;
        let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=${this.shop_id}`;

        // 贝店程序限制，WebView模式下无法打开详情页，调用外部浏览器打开
        // #ifdef APP-PLUS
        plus.runtime.openURL(api)
        // #endif

        // 微信小程序中暂时没有解决方案
        // #ifdef MP-WEIXIN
        uni.setClipboardData({
          data: api,
          success: function () {
            uni.showModal({
              title: '提示',
              content: '链接已复制，请在浏览器中访问',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });
          }
        })
        // #endif
      },
    },
  }
</script>

<style>
  @import "../../common/uni.css";

  page,
  view {
    display: flex;
  }

  page {
    min-height: 100%;
  }

  #tuijian-product .uni-media-list-logo {
    height: 200px;
    width: 200px;
    margin-right: 20px;
  }

  #tuijian-product .uni-media-list-body {
    height: 200px;
  }

  #tuijian-product .uni-media-list-text-top {
    font-size: 26px;
  }

  #tuijian-product .uni-media-list-text-bottom {
    flex-direction: column;
  }

  .product-price {
    font-size: 25px;
    color: red;
  }

  .product-origin-price {
    font-size: 20px;
    text-decoration: line-through;
    color: #929292;
  }

  .loadMore {
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    justify-content: center;
    align-items: flex-start;
  }
</style>
